<template>
	<view class="uni-popup-dialog">
		<view class="uni-dialog-title">
			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
		</view>
		<view class="uni-dialog-content">
			<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
			<view v-else-if="mode == 'input'" class="uni-dialog-content">
				<slot>
					<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus">
				</slot>
				<view>
					<image @click="openCamera" src="../../static/icon/scan.png"
						style="height: 50rpx;width: 50rpx;margin-left: 20rpx;"></image>
				</view>
			</view>
			<view v-else-if="mode == 'repeatScan'" class="uni-dialog-content">

				<slot>
					<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus">
				</slot>
				<view>
					<image @click="repeatpenCamera" src="../../static/icon/scan.png"
						style="height: 50rpx;width: 50rpx;margin-left: 20rpx;"></image>
				</view>
				<view style="position: absolute;left: 70rpx;bottom: 100rpx;">已扫：{{scanData.length}}个</view>
			</view>
			<view v-else-if="mode == 'handAllot'">
				<view>
					<!-- <uni-section title="表单" type="line"> -->
						<view class="example">
							<!-- 基础用法，不包含校验规则 -->
							<uni-forms ref="baseForm" :model="baseFormData" labelWidth="250px" labelPosition="top">
								<uni-forms-item label="收货员列表">
									<!-- <uni-data-select v-model="baseFormData.pickEmployees"
										:localdata="pickEmployeesList">
									</uni-data-select> -->
									<view
										style="border: 1px solid #e5e5e5;height: 70rpx;line-height: 70rpx;border-radius: 8rpx;"
										@tap="handleMultiple(form.selectIndex)">
										<view style="margin-left: 20rpx;">
											<view v-if="form.selectValue"
												style="font-size: 28rpx;color: $uni-main-color;">{{form.selectValue}}
											</view>
											<view v-else>请选择</view>
										</view>
									</view>
								</uni-forms-item>
								<uni-forms-item label="叉车驾驶员列表">
									<!-- <uni-data-select v-model="baseFormData.liftEmployees"
										:localdata="liftEmployeesList">
									</uni-data-select> -->
									<view
										style="border: 1px solid #e5e5e5;height: 70rpx;line-height: 70rpx;border-radius: 8rpx;"
										@tap="handleMultiple1(form1.selectIndex)">
										<view style="margin-left: 20rpx;">
											<view v-if="form1.selectValue"
												style="font-size: 28rpx;color: $uni-main-color;">{{form1.selectValue}}
											</view>
											<view v-else>请选择</view>
										</view>
									</view>
								</uni-forms-item>
								<uni-forms-item label="是否需要叉车">
									<uni-data-select v-model="baseFormData.needLiftYn" :localdata="needLiftYnList">
									</uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="是否需要重新包装">
									<uni-data-select v-model="baseFormData.needRePackYn" :localdata="needRePackYnList">
									</uni-data-select>
								</uni-forms-item>
							</uni-forms>
						</view>
					<!-- </uni-section> -->
					<multiple-picker title="请选择" :show="selectMultiple.show" :columns="pickEmployeesList"
						:defaultIndex="selectMultiple.index" @confirm="confirmMultiple"
						@cancel="selectMultiple.show = false"></multiple-picker>

					<multiple-picker title="请选择" :show="selectMultiple1.show" :columns="liftEmployeesList"
						:defaultIndex="selectMultiple1.index" @confirm="confirmMultiple1"
						@cancel="selectMultiple1.show = false"></multiple-picker>
				</view>
			</view>
			<view v-else-if="mode == 'deliver'">
				<view>
					<!-- <uni-section title="表单" type="line"> -->
						<view class="example">
							<!-- 基础用法，不包含校验规则 -->
							<uni-forms ref="baseForm" :model="deliverFormData" labelWidth="250px" labelPosition="top">
								<uni-forms-item label="订单类型">
									<uni-data-select @change="orderTypeChange" v-model="deliverFormData.orderTypeNo"
										:localdata="orderTypeNoList">
									</uni-data-select>
								</uni-forms-item>
								<uni-forms-item required label="车辆类型" v-if="deliverFormData.orderTypeNo == 'FTL'">
									<uni-data-select v-model="deliverFormData.VehicleModelNo"
										:localdata="VehicleTypeList">
									</uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="服务类型">
									<uni-data-select v-model="deliverFormData.serviceType" :localdata="serviceTypeList">
									</uni-data-select>
								</uni-forms-item>
							</uni-forms>
						</view>
					<!-- </uni-section> -->
				</view>
			</view>
			<view v-else-if="mode == 'unpaidOrder'">
				<view>
					<!-- <uni-section title="" type="line"> -->
						<view class="example">
							<!-- 基础用法，不包含校验规则 -->
							<uni-forms ref="baseForm" :model="deliverFormData" labelWidth="250px" labelPosition="top">
								<uni-forms-item required label="融资产品">
									<uni-data-select v-model="unpaidForm.product" :localdata="productList">
									</uni-data-select>
								</uni-forms-item>
								<uni-forms-item required label="贷款期限">
									<uni-data-select v-model="unpaidForm.date" :localdata="paymentDateList">
									</uni-data-select>
								</uni-forms-item>
								<!-- <uni-forms-item label="利息先付,到期还款">
								</uni-forms-item> -->
								<view style="font-size: 28rpx;margin-bottom: 25rpx;">利息先付,到期还款</view>
								<view style="font-size: 28rpx;margin-bottom: 25rpx;">年化利率:0.2</view>
							</uni-forms>
						</view>
					<!-- </uni-section> -->
				</view>
			</view>
			<view v-else-if="mode == 'chooseMalesheep'">
				<view style="margin-bottom: 20rpx;">数量：{{dataList.length}}个</view>
				<view style="margin-bottom: 20rpx;">已选择：{{sheepNo}}</view>
				<uni-easyinput v-model="sheepNoSearchValue" placeholder="请扫耳标号:" suffix-icon="search" @confirm="maleSheepSearch" @iconClick="maleSheepSearch"></uni-easyinput>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view v-for="(item,index) in dataList1">
						<uni-list>
							<uni-list-item :index="index+1" @click="pickMaleSheep(item,item.sheepNo)"
								:title="'种羊编号:'+item.sheepNo + '\n' + '体重:'+item.weight" :note="'生日:'+item.birthDate + '\n' +  '品质:'+item.qualityEval "  link="reLaunch" clickable>
							</uni-list-item>
						</uni-list>
					</view>
				</scroll-view>
			</view>
			<view v-else-if="mode == 'chooseOrder'">
				<view style="margin-bottom: 20rpx;">数量：{{dataList.length}}个</view>
				<view style="margin-bottom: 20rpx;">已选择：{{customerName}}</view>
				<uni-easyinput v-model="customerNameSearchValue" placeholder="请输入订单号:" suffix-icon="search" @confirm="orderSearch" @iconClick="orderSearch"></uni-easyinput>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view v-for="(item,index) in dataList1">
						<uni-list>
							<uni-list-item :index="index+1" @click="chooseCustomer(item,item.skuName)"
								:title="'合同号:'+item.contractNo + '\n' + '商品:'+item.skuName" :note="'商品编号:'+item.custSkuId + '\n' +  '销售价格:'+item.custRelSalesPrice + '\n' + '数量:'+item.qty" link="reLaunch" clickable>
							</uni-list-item>
						</uni-list>
					</view>
				</scroll-view>
			</view>
			<view v-else-if="mode == 'chooseCompany'">
				<uni-card>
					<evan-checkbox-group style="display: flex" 
						v-model="scanData">
						<evan-checkbox key="1" label="1"></evan-checkbox>
					<view style="margin-left: 10rpx;">华致酒行连锁管理股份有限公司</view>
					</evan-checkbox-group>
				</uni-card>
			</view>
			<view v-else>
				<view style="margin-bottom: 20rpx;">数量：{{dataList.length}}个</view>
				<view style="margin-bottom: 20rpx;">已选择：{{customerName}}</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view v-for="(item,index) in dataList">
						<uni-list>
							<uni-list-item :index="index+1" @click="chooseCustomer(item,item.customerName)"
								:title="'客户名称:'+item.customerName" :note="'客户代码:'+item.id" link="reLaunch" clickable>
							</uni-list-item>
						</uni-list>
					</view>
				</scroll-view>
			</view>

		</view>
		<view class="uni-dialog-button-group">
			<view class="uni-dialog-button" @click="close">
				<text class="uni-dialog-button-text">{{cancelText}}</text>
			</view>
			<view class="uni-dialog-button uni-border-left" @click="onOk">
				<text class="uni-dialog-button-text uni-button-color">{{confirmText}}</text>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog title="提示" :content="'确认删除物品名为：'+ deleteItemName +'的数据吗？'" ref="inputClose"
				@confirm="confirm" mode="base">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue';
	/**
	 * PopUp 弹出层-对话框样式
	 * @description 弹出层-对话框样式
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} value input 模式下的默认值
	 * @property {String} placeholder input 模式下输入提示
	 * @property {String} type = [success|warning|info|error] 主题样式
	 *  @value success 成功
	 * 	@value warning 提示
	 * 	@value info 消息
	 * 	@value error 错误
	 * @property {String} mode = [base|input] 模式、
	 * 	@value base 基础对话框
	 * 	@value input 可输入对话框
	 * @property {String} content 对话框内容
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */

	export default {
		components: {
			uniList
		},
		name: "uniPopupDialog",
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
			placeholder: {
				type: [String, Number],
				default: ''
			},
			chooseData: {
				type: Array,
				default: function() {
					return []
				}
			},
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			deleteIcon: {
				type: Boolean,
				default: false
			},
			/**
			 * 对话框主题 success/warning/info/error	  默认 success
			 */
			type: {
				type: String,
				default: 'info'
			},
			/**
			 * 对话框模式 base/input
			 */
			mode: {
				type: String,
				default: 'base'
			},
			/**
			 * 对话框标题
			 */
			title: {
				type: String,
				default: '提示'
			},
			/**
			 * 对话框内容
			 */
			content: {
				type: String,
				default: ''
			},
			/**
			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
			 */
			beforeClose: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			return {
				customerNameSearchValue:'',
				customerName: null,
				sheepNo: null,
				dialogType: 'error',
				focus: false,
				val: "",
				dataInfo: [],
				index: '',
				old: {
					scrollTop: 0
				},
				scrollTop: 0,
				deleteItemName: '',
				index: 0,

				//以下是mode = repeatScan的变量
				scanData: [],
				selectMultiple: {
					show: false,
					index: []
				},
				form: {
					selectValue: '',
					selectIndex: [],
				},
				selectMultiple1: {
					show: false,
					index: []
				},
				form1: {
					selectValue: '',
					selectIndex: [],
				},
				//以下是mode = deliver的变量
				deliverFormData: {
					orderTypeNo: '',
					serviceType: '',
					VehicleModelNo: '', //车辆类型
				},
				unpaidForm: {
					date: '',
					rate: '',
					payment: '',
					product:''
				},
				productList:[{
					text: '酒采贷',
					value: '酒采贷'
				},
				{
					text: '酒新贷',
					value: '酒新贷'
				},
				{
					text: '酒微贷',
					value: '酒微贷'
				}
				],
				paymentDateList: [{
						text: '一个月',
						value: '一个月'
					},
					{
						text: '三个月',
						value: '三个月'
					},
					{
						text: '六个月',
						value: '六个月'
					},
					{
						text: '一年',
						value: '一年'
					}
				],
				orderTypeNoList: [{
						text: '整车',
						value: 'FTL'
					},
					{
						text: '零担',
						value: 'LTL'
					}
				],
				VehicleTypeList: [],
				serviceTypeList: [{
						text: '门到门',
						value: '门到门'
					},
					{
						text: '门到库',
						value: '门到库'
					},
					{
						text: '库到门',
						value: '库到门'
					},
					{
						text: '库到库',
						value: '库到库'
					}
				],
				// 以下是mode = handAllot的变量
				baseFormData: {
					liftEmployees: [],
					pickEmployees: [],
					needLiftYn: 'Y',
					needRePackYn: ''
				},
				needLiftYnList: [{
						text: '需要',
						value: 'Y'
					},
					{
						text: '不需要',
						value: ''
					}
				],
				needRePackYnList: [{
						text: '需要',
						value: 'Y'
					},
					{
						text: '不需要',
						value: ''
					}
				],
				liftEmployeesList: [],
				pickEmployeesList: [],
				dataList1: []
			}
		},
		inject: ['popup'],
		watch: {
			location(val) {
				console.log(val)
				this.index = val
			},
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			dataList(val) {
				this.dataInfo = val
				console.log(this.dataInfo)
			},
			value(val) {
				this.val = val
			}
		},
		created() {
			// 对话框遮罩不可点击
			// this.liftSearch();
			// this.pickSearch();
			// this.vehicleSearch();
			this.popup.mkclick = false
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
		},
		mounted() {
			this.focus = true
		},
		methods: {
			orderSearch(){
				let opt = {
					url: 'order/salesOrderItem/search',
					method: 'POST'
				};
				let params = {
					salesOrderNo: this.customerNameSearchValue
				};
				this.$http.httpTokenRequest(opt, params).then(res => {
					this.dataList1 = res.data.data
				})
			},
			maleSheepSearch(){
				let opt = {
					url: 'basic/gzyySheepInfor/search',
					method: 'POST'
				};
				let params = {
					sheepBelongTo: uni.getStorageSync('userInfo').customerId,
					sheepType:'种羊'
				}
				this.$http.httpTokenRequest(opt, params).then(res => {
					this.dataList1 = res.data.data
				})
			},
			openCamera() {
				uni.scanCode({
					success: function(res) {
						this.val = res.result
					}
				});
			},
			//收货员
			handleMultiple(val) {
				console.log(val);

				this.selectMultiple.index = val || [];
				this.selectMultiple.show = true;
			},
			confirmMultiple(e) {
				console.log(e);

				let temp = [];
				e.selected.forEach(item => {
					temp.push(item.label);
				})
				this.baseFormData.pickEmployees = e.value
				this.form.selectValue = temp.toString();
				this.form.selectIndex = e.value;
				this.selectMultiple.show = false;
			},
			//叉车
			handleMultiple1(val) {
				console.log(val);
				this.selectMultiple1.index = val || [];
				this.selectMultiple1.show = true;
			},
			confirmMultiple1(e) {
				console.log(e);

				let temp = [];
				e.selected.forEach(item => {
					temp.push(item.label);
				})
				this.baseFormData.liftEmployees = e.value
				this.form1.selectValue = temp.toString();
				this.form1.selectIndex = e.value;
				this.selectMultiple1.show = false;
			},
			repeatpenCamera() {
				uni.scanCode({
					success: function(res) {
						this.scanData.push(res.result)
					}
				});
			},
			chooseCustomer(item, name) {
				this.customerName = name;
				this.chooseData.splice(0, this.chooseData.length)
				this.chooseData.push(item)
			},
			pickMaleSheep(item, name) {
				this.sheepNo = name;
				this.chooseData.splice(0, this.chooseData.length)
				this.chooseData.push(item)
			},
			
			liftSearch() { //叉车驾驶员列表
				let opt = {
					url: 'basic/hrEmployeeManage/search',
					method: 'POST'
				};
				let params = {
					userType: 'lift'
				};
				this.$http.httpTokenRequest(opt, params).then(res => {

					for (let i in res.data.data) {
						this.liftEmployeesList.push({
							label: res.data.data[i].personName,
							value: res.data.data[i].id
						})
					}
				})
			},
			pickSearch() { //收货员列表 3
				let opt = {
					url: 'basic/hrEmployeeManage/search',
					method: 'POST'
				};
				let params = {
					userType: 'pick'
				};
				this.$http.httpTokenRequest(opt, params).then(res => {

					for (let i in res.data.data) {
						this.pickEmployeesList.push({
							label: res.data.data[i].personName,
							value: res.data.data[i].id
						})
					}
				})
			},
			vehicleSearch() {
				let opt = {
					url: 'tms/tViVehicleModel/search',
					method: 'POST'
				};
				this.$http.httpTokenRequest(opt, {}).then(res => {
					for (let i in res.data.data) {
						this.VehicleTypeList.push({
							text: res.data.data[i].vehicleModelNo,
							value: res.data.data[i].id
						})
					}
					console.log(this.VehicleTypeList)
				})
			},
			orderTypeChange(e) {
				if (e == 'LTL') {
					this.deliverFormData.VehicleModelNo = '';
				}
			},
			/**
			 * 点击确认按钮
			 */
			confirm() {
				this.dataList.splice(this.index, 1)
				this.$refs.inputDialog.close();

			},
			remove(e, name) {
				this.$refs.inputDialog.open()
				this.index = e;
				this.deleteItemName = name
				// this.dataList.splice(e, 1)
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			onOk() {
				if (this.mode === 'input') {
					this.$emit('confirm', this.val)
				}
				 else if (this.mode === 'chooseOrder') {
				 	this.$emit('confirm', this.chooseData)
				 }				 
				 else if (this.mode === 'chooseMalesheep') {
				 	this.$emit('confirm', this.chooseData)
				 }
				 else if (this.mode === 'repeatScan') {
					let params = {
						val: this.val,
						scanData: this.scanData
					};
					this.$emit('confirm', params)
				} else if (this.mode === 'handAllot') {
					this.$emit('confirm', this.baseFormData)
				} else if (this.mode === 'deliver') {
					if (this.deliverFormData.orderTypeNo == 'FTL' && this.deliverFormData.VehicleModelNo == '') {
						uni.showToast({
							title: '请选择车辆类型',
							position: 'center',
							duration: '1000'
						});
					} else {
						this.$emit('confirm', this.deliverFormData)
					}
				} else {
					this.$emit('confirm')
				}
				if (this.beforeClose) return
				this.popup.close()
			},
			/**
			 * 点击取消按钮
			 */
			close() {
				if (this.beforeClose) {
					this.$emit('close', () => {
						this.popup.close()
					})
					return
				}
				this.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup-dialog {
		// width: 380px;
		min-width: 300px;
		border-radius: 15px;
		background-color: #fff;
	}

	.scroll-Y {
		height: 650rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */

		/* #endif */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: $uni-color-primary;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: $uni-color-success;
	}

	.uni-popup__warn {
		color: $uni-color-warning;
	}

	.uni-popup__error {
		color: $uni-color-error;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>